import React, { useEffect, useRef } from 'react';
import { Card, Table, Typography, Spin } from 'antd';
import * as echarts from 'echarts';

const { Title, Text } = Typography;

// 模拟数据
const mockData = [
  { user_id: 1, cart_rate: 0.85 },
  { user_id: 2, cart_rate: 0.65 },
  { user_id: 3, cart_rate: 0.92 },
  { user_id: 4, cart_rate: 0.78 },
  { user_id: 5, cart_rate: 0.45 },
  { user_id: 6, cart_rate: 0.95 },
  { user_id: 7, cart_rate: 0.88 },
  { user_id: 8, cart_rate: 0.72 },
];

const columns = [
  {
    title: '用户ID',
    dataIndex: 'user_id',
    key: 'user_id',
  },
  {
    title: '购物车转化率',
    dataIndex: 'cart_rate',
    key: 'cart_rate',
    render: (value) => `${(value * 100).toFixed(2)}%`,
  },
];

const CartRateTable = () => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current && !chartInstance.current) {
      chartInstance.current = echarts.init(chartRef.current);
    }

    // 准备图表数据
    const chartData = mockData.map(item => ({
      name: `用户${item.user_id}`,
      value: item.cart_rate * 100
    }));

    const option = {
      title: {
        text: '购物车转化率分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: chartData.map(item => item.name)
      },
      series: [
        {
          name: '转化率',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: chartData
        }
      ]
    };

    // 渲染图表
    if (chartInstance.current) {
      chartInstance.current.setOption(option);
    }

    // 响应式调整
    const handleResize = () => {
      if (chartInstance.current) {
        chartInstance.current.resize();
      }
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
      }
    };
  }, []);

  return (
    <div>
      <Title level={4}>购物车转化率数据</Title>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
        <Card>
          <div ref={chartRef} style={{ width: '100%', height: 400 }} />
        </Card>
        <Card>
          <Title level={5}>转化率统计信息</Title>
          <div style={{ marginBottom: 20 }}>
            <Text strong>平均转化率: </Text>
            <Text>{(mockData.reduce((sum, item) => sum + item.cart_rate, 0) / mockData.length * 100).toFixed(2)}%</Text>
          </div>
          <div style={{ marginBottom: 20 }}>
            <Text strong>最高转化率: </Text>
            <Text>{(Math.max(...mockData.map(item => item.cart_rate)) * 100).toFixed(2)}%</Text>
          </div>
          <div>
            <Text strong>最低转化率: </Text>
            <Text>{(Math.min(...mockData.map(item => item.cart_rate)) * 100).toFixed(2)}%</Text>
          </div>
        </Card>
      </div>
      <Card>
        <Title level={5}>详细数据列表</Title>
        <Table columns={columns} dataSource={mockData} rowKey="user_id" pagination={{ pageSize: 10 }} />
      </Card>
    </div>
  );
};

export default CartRateTable;